<template>
  <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="500px">
    <!-- 主体内容 -->
    <el-form :model="model" :rules="rules" ref="formRef" label-width="115px">
      <el-form-item v-if="isMultiLanguage">
        <span slot="label">
          {{ $t('portal.multilingual') }}
          <el-tooltip
            effect="dark"
            :content="$t('portal.portalTip12')"
            placement="top"
          >
            <i class="iconfont icon-fdn-info"></i>
          </el-tooltip>
          
        </span>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            @change="checkboxChange(i, $event)"
            v-for="(v, i) in language"
            :key="v.code"
            :label="v.code"
            :disabled="v.isMainLanguage || v.isToB"
          >
            {{ v.remark }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <template v-for="v in templateNameList">
        <el-form-item
          :label="`${v.label}`"
          :key="v.key"
          v-if="v.show"
          :prop="v.key"
        >
          <el-input
            :placeholder="$t('common.placeholder.input2')"
            v-model="model[v.key]"
          ></el-input>
        </el-form-item>
      </template>
    </el-form>

    <div slot="footer">
      <el-button type="default" @click="visible = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="submit">{{ $t('common.base.confirm') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
/** vue */
import { reactive, toRefs, ref, inject, onMounted } from 'vue';

export default {
  name: 'add-template-dialog',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const editDoorType = inject('editDoorType');
    const isMultiLanguage = inject('isMultiLanguage')
    const languagesList = inject('languagesList')
    const defaultModel = inject('model')
    const formRef = ref(null);

    const state = reactive({
      visible: false,
      checkList: [],
      language: languagesList.value,
      templateNameList: languagesList.value.map(item=> {return { key: item.languageKey, label: item.languageValue, show: isMultiLanguage.value ? item.isToB: item.isMainLanguage }}),
      model: defaultModel,
      rules: {},
      mainLanguage: languagesList.value.filter(item=> item.isMainLanguage)[0]
    });
    // 初始化表单验证规则
    state.templateNameList.map((v, i) => {
      state.rules[v.key] = [
        { required: false, message: `请输入${v.label}`, trigger: 'blur' },
        { max: 50, message: '最多50个字符', trigger: 'blur' },
      ];
    });
    state.rules[state.mainLanguage.languageKey] = [
        { required: true, message: `请输入${state.mainLanguage.languageValue}名称`, trigger: 'blur' },
        { max: 50, message: '最多50个字符', trigger: 'blur' },
      ];
    // 筛选掉没开灰度的语言
    if(!isMultiLanguage.value){
      state.language = [state.language[0]]
    }
    
    const getInitData = () => {
      languagesList.value.map(item=> {
        if(item.isMainLanguage || item.isToB) {
          state.checkList.push(item.languageKey) 
        }
      })
    }

    const openDialog = () => {
      state.visible = true;
    };
    
    const checkboxChange = (idx, e) => {
      state.templateNameList[idx].show = e;
    };
    const inputChange = (label, e) => {
      state.model[label] = e;
    };

    const submit = () => {
      formRef.value.validate(valid => {
        if (valid) {
          const doorNameLanguage = {};
          let language = state.language.filter(v=>state.checkList.includes(v.code));
          state.checkList.map(key => {
            doorNameLanguage[key] = state.model[key];
          });
          const params = {
            typeName:state.model['zh'],
            setting: {
              language,
              doorNameLanguage,
            },
          };
          editDoorType({ editType: 'create', params });
          state.visible = false;
          formRef.value.resetFields()
        } else {
          console.info('表单校验不通过');
        }
      });
    };
    onMounted(() => {
      getInitData()
    })
    
    return {
      ...toRefs(state),
      formRef,
      openDialog,
      checkboxChange,
      inputChange,
      submit,
      isMultiLanguage,
      getInitData
    };
  },
};
</script>
<style lang="scss" scoped>
.el-form-item{
  display: flex;
}
  ::v-deep .el-checkbox{
    margin-right: 16px;
  }
  ::v-deep .el-input{
    width: 280px;
  }
  ::v-deep .el-form-item__content {
    margin-left: 20px !important;
  }
  ::v-deep .is-required:before{
    margin-right: 0;
  }
  ::v-deep .el-form-item__label {
    text-align: left;
    padding-left: 15px;
  }
</style>